import { defineStore } from 'pinia'
// Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递

const useMainStore = defineStore('main', {
  // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
  // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
  state: () => {
    return {
      info: 'pinia...',
      count: 10
    }
  },
  // 类似于组件的computed，用来封装计算属性，具有缓存的功能
  getters: {
    // 函数接收一个可选参数：state状态对象
    count10(state) {
      return state.count += 10
    },
    // count10() {
    //   return this.count += 10
    // },
  },
  // 类似于vue2组件的methods，用于封装业务逻辑，修改state
  // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this
  actions: {
    changeState() {
      this.count += 10
      this.info = "actions修改数据"
    },
    changeStates(num) {
      this.count += num + 2
      this.info = "actions修改数据"
    }
  }
})
export default useMainStore